<template>
	<view class="content">
		<u-toast ref="uToast"></u-toast>
		<view class=" flex justify-center align-center margin-top-sm">
			<!-- @click="click" -->
			<u--image :showLoading="true" src="https://cdn.ybh.gengduoke.com/logoin.jpg" width="80px"
				height="80px"></u--image>

			<!-- <text class="text4">皮皮虾模板库欢迎您</text> -->
		</view>
		<view class="_b">
			<text
				:style="{'border-bottom':adminType == 'login' ? '6rpx solid rgba(18, 141, 247, 1)' : '6rpx solid transparent'}"
				@click="adminType = 'login'">账号密码登录</text>
			<text
				:style="{'border-bottom':adminType == 'code' ? '6rpx solid rgba(18, 141, 247, 1)' : '6rpx solid transparent'}"
				@click="adminType = 'code'">验证码登录</text>
		</view>
		<view class="_input" v-if="adminType == 'login'">
			<input v-model="userInfo.username" type="text" :placeholder="adminType == 'login' ? '请输入您的账号' : '请输入您的手机号'"
				placeholder-class="_pl" />
		</view>
		<view class="_input" v-else>
			<input v-model="userInfo.phone" type="text" :placeholder="adminType == 'login' ? '请输入您的账号/手机号' : '请输入您的手机号'"
				placeholder-class="_pl" />
		</view>
		<view class="_input" v-if="adminType == 'login'">
			<input type="text" v-model="userInfo.password" :placeholder="adminType == 'login' ? '请输入您的登录密码' : '请输入验证码'"
				placeholder-class="_pl" />

		</view>
		<view class="_input" v-if="adminType == 'code'">
			<input type="text" v-model="userInfo.checkKey" :placeholder="adminType == 'login' ? '请输入您的登录密码' : '请输入验证码'"
				placeholder-class="_pl" />
			<button class="sms" @click="start" :disabled="showText">{{second ? second : '获取验证码'}}</button>
		</view>

		<u-button size="normal" type="primary" @click="getLogin"><u-loading-icon class="margin-right" v-if="ShowLogin"
				color="#fff" size="24"></u-loading-icon>
			{{ShowLogin?'登录中':'马上登录'}}</u-button>

		<text class="passworld" v-if="adminType == 'login'" @click="joincom">申请加入公司 ></text>
		<!-- <view class="_check">
			<checkbox-group @change="checkbox">
				<label>
					<checkbox value="t" :checked="isShow" color="#128df7" style="transform:scale(0.7)" />
					<text>我已阅读并同意<text style="color:#128df7;">《用户协议》</text>和<text
							style="color:#128df7;">《隐私政策》</text></text>
				</label>
			</checkbox-group>
		</view> -->
	</view>
</template>

<script>
	const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/; // 手机号正则表达式  
	export default {
		data() {
			return {
				//用户登录类型
				adminType: 'login',
				//是否同意用户隐私政策协议
				isShow: false,
				ShowLogin: false,
				//验证码倒计时
				second: 0,
				userInfo: {
					isNotCheckKey: 1
				}, //用户信息
				showText: false
			}
		},

		onLoad() {
			const that = this
			let loginInfo = uni.getStorageSync('userName');
			console.log(loginInfo);
			if (loginInfo) {
				setTimeout(() => uni.reLaunch({
					url: `/pages/index/message`
				}), 1000);
			}
		},
		methods: {
			/** 
			@method 用户隐私框
			**/
			checkbox(e) {
				console.log(e);
			},
			/**
			@method 保存密码到本地,读取则放在onShow函数使用uni.getStorageSync()读取本地账号密码
			**/
			user(e) {
				e.detail.value.length > 0 ? uni.setStorageSync('key', '存储的账号密码数据源') : uni.removeStorage({
					key: '要删除的数据源key'
				});
			},
			/**
			@method 验证码开始倒计时 setTimeout设置到时时间1000 == 1秒
			**/
			start() {
				if (this.second > 0) return
				const {
					phone
				} = this.userInfo
				const that = this
				if (!phone) {
					that.$refs.uToast.show({
						type: 'error',
						message: '请输入手机号',
					})
					return
				} else if (!that.validatePhone(phone)) {
					this.$refs.uToast.show({
						type: 'error',
						message: '您输入的手机号不正确'
					})
					return
				} else {
					this.second = 60;
					this.showText = true;
					var interval = setInterval(() => {
						--this.second
					}, 1000)
					setTimeout(() => {
						clearInterval(interval)
						this.showText = false;
					}, 60000);
					this.request('/manageApk/Login/getCode', 'GET', {
						phone
					}).then(res => {
						console.log(res.data);
						if (res.data.code != 200) {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						} else {

						}
					})
				}

			},
			joincom() {
				uni.navigateTo({
					url: `/pages/loginPage/company`
				})
			},
			// 手机号验证函数  
			validatePhone(phone) {
				if (!reg.test(phone)) {
					this.$refs.uToast.show({
						type: 'error',
						message: '您输入的手机号不正确'
					});
					return false;
				}
				return true;
			},
			// 登录
			getLogin() {
				let options = {}
				const that = this
				const {
					adminType,
					userInfo
				} = this;
				const {
					username,
					password,
					phone,
					checkKey
				} = userInfo;
				if (adminType == 'login' && !username) {
					that.$refs.uToast.show({
						type: 'error',
						message: '请输入账号',
					})
					return
				}
				if (adminType == 'login' && !password) {
					that.$refs.uToast.show({
						type: 'error',
						message: '请输入密码',
					})
					return
				}

				if (adminType == 'code' && !phone) {
					that.$refs.uToast.show({
						type: 'error',
						message: '请输入手机号',
					})
					return
				}
				if (adminType == 'code' && !that.validatePhone(phone)) {
					this.$refs.uToast.show({
						type: 'error',
						message: '您输入的手机号不正确'
					})
					return
				}
				if (adminType == 'code' && !checkKey) {
					that.$refs.uToast.show({
						type: 'error',
						message: '请输入验证码',
					})
					return
				}
				that.ShowLogin = true
				uni.request({
					url: adminType == 'login' ? that.myApi.login : that.myApi.loginPhone,
					data: that.userInfo,
					method: 'POST',
					success(res) {
						console.log(res);
						that.ShowLogin = false
						if (res.data.code == 200) {
							const userName = res.data.result
							uni.setStorageSync('token', userName.token);
							uni.setStorageSync('userName', userName.userInfo);
							console.log(userName.userInfo, 2222);
							that.$refs.uToast.show({
								type: 'success',
								message: `欢迎您  ， ${userName.userInfo.realname}`,
							})
							setTimeout(() => uni.reLaunch({
								url: `/pages/index/message`
							}), 1000);
						} else {
							that.ShowLogin = false
							that.$refs.uToast.show({
								type: 'error',
								message: res.data.message,
							})

						}
					},
				});
			}

		}
	}
</script>
<style>
	page {
		background: linear-gradient(180deg, rgba(196, 227, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
	}
</style>
<style lang="scss" scoped>
	button::after {
		border: none;
	}

	//是否刘海屏
	.content {
		width: auto;
		padding: 30rpx;

		.text_body {
			width: 100%;
			margin-top: 120rpx;

			.text1 {
				font-size: 35rpx;
				font-weight: bold;
				display: block;
			}

			.text4 {
				font-size: 35rpx;
				font-weight: bold;
				margin-top: 10rpx;
				display: block;
			}
		}

		._b {
			width: 60%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0px auto;
			margin-top: 120rpx;
			margin-bottom: 50rpx;

			text {
				font-size: 30rpx;
				padding-bottom: 15rpx;
			}
		}

		._input {
			width: 100%;
			height: 95rpx;
			border-radius: 50rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
			margin-top: 30rpx;

			input {
				width: 70%;
				height: 80rpx;
				padding-left: 40rpx;
			}

			._pl {
				font-size: 28rpx;
			}

			.sms {
				font-size: 28rpx;
				white-space: nowrap;
				color: rgba(18, 141, 247, 1);
				margin-right: 25rpx;
				background-color: transparent;
				border: none;
			}
		}

		.login {
			width: 100%;
			height: 85rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50rpx;
			margin: 0px auto;
			outline: none;
			background-color: rgba(18, 141, 247, 1);
			color: #fff;
			font-size: 30rpx;
			margin-top: 30rpx;
		}

		.passworld {
			display: block;
			margin: 0px auto;
			text-align: center;
			margin-top: 40rpx;
			color: rgba(18, 141, 247, 1);
			// text-decoration: underline;
		}

		._check {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 180rpx;

			text {
				font-size: 28rpx;
			}
		}

		._user {
			font-size: 26rpx;
			display: flex;
			align-items: center;
		}
	}
</style>